import Window from "../components/window/window";
import createElement from "../createElement";
import { IWindow } from "../interfaces/window";
import { IAppInfo } from "./appInfo";

const defaultURL = 'https://www.douyuex.com/6558897';

// Edge 应用窗口（浏览器功能）
const Edge = (appInfo: IAppInfo, _args?: any) => {
  // 调用 Window 组件并设置窗口参数
  Window({
    icon: appInfo.icon, // 应用图标
    name: appInfo.name, // 应用名称
    title: appInfo.productName, // 窗口标题
    top: 50, // 窗口距离顶部的位置
    left: 50, // 窗口距离左侧的位置
    width: 800, // 窗口宽度
    height: 500, // 窗口高度
    transprencyContent: true, // 设置窗口内容是否透明
    fluidContent: true, // 设置窗口内容是否自适应
    content: (win: IWindow) => {
      // 创建浏览器窗口的整体容器
      const container = createElement('div', {
        className: 'w-full h-full flex flex-col',
      }, [
        // 地址栏部分
        createElement('div', {
          className: 'browser-address-bar bg-gray-100 p-2 flex items-center',
        }, [
          // 地址栏输入框
          createElement('input', {
            className: 'browser-url-input w-full p-1 border border-gray-300 rounded',
            type: 'text',
            value: '', // 默认地址
            placeholder: '输入地址',
            id: 'browser-url-input',
            onkeydown: (e: KeyboardEvent) => {
              // 当按下回车时，加载新的网址
              if (e.key === 'Enter') {
                var url = (e.target as HTMLInputElement).value;
                url = url==''?defaultURL:url.trim();
                url  = url.startsWith('http://') || url.startsWith('https://') ? url : `https://${url}`;
                loadURL(url); // 调用加载 URL 的方法
              }
              
            },
          }),
          // 显示/隐藏地址栏按钮
        //   createElement('button', {
        //     className: 'toggle-address-bar p-1 ml-2 bg-blue-500 text-white rounded',
        //     onclick: () => toggleAddressBar(),
        //   }, ['关闭地址栏']),
        ]),

        // 浏览器显示内容的区域（iframe）
        createElement('div', {
          className: 'browser-content flex-1 h-full',
        }, [
          createElement('iframe', {
            id: 'browser-frame',
            src: defaultURL, // 默认显示的网址
            className: 'w-full h-full border-none',
            onload: () => {
              // 当 iframe 加载完成后，设置窗口标题为当前页面的标题
              win.setTitle('果神的弹幕')
            },
          }),
        ]),
      ]);

      // 加载新的 URL 到 iframe
      function loadURL(url: string) {
        const iframe = document.getElementById('browser-frame') as HTMLIFrameElement;
        const input = document.getElementById('browser-url-input') as HTMLInputElement;

        // 更新 iframe 内容并且设置地址栏的值
        if (iframe && input) {
          iframe.src = url;
          input.value = url; // 更新地址栏中的 URL
          // 提取iframe标题
          win.setTitle(iframe.contentDocument?.title || '')
        }
      }

      // 切换地址栏的显示/隐藏
      function toggleAddressBar() {
        const addressBar = document.querySelector('.browser-address-bar') as HTMLElement;
        const iframe = document.getElementById('browser-frame') as HTMLIFrameElement;

        if (addressBar && iframe) {
          if (addressBar.style.display === 'none') {
            addressBar.style.display = 'flex';
            iframe.style.height = 'calc(100% - 40px)'; // 调整 iframe 高度
          } else {
            addressBar.style.display = 'none';
            iframe.style.height = '100%'; // 增加 iframe 高度
          }
        }
      }

      return container;
    },
  });
};

export default Edge;
